<template>
    <div>
        <div class="blog-up">
            <p class="blog-up-name">动态展示界面</p>
        </div>
        <div class="show-content">
            <div class="show-left">
                <h3><span>文章目录</span><i class="el-icon-close"></i></h3>
                <!-- <a href="#" name="top"></a> -->
                <ul>
                    <li><i class="el-icon-star-off"></i>&nbsp;&nbsp;<a href="#first">前言</a></li>
                    <li><i class="el-icon-star-on"></i>&nbsp;&nbsp;<a href="#code">代码</a></li>
                    <li><i class="el-icon-star-on"></i>&nbsp;&nbsp;<a href="#process">简单介绍实现过程</a></li>
                    <li><i class="el-icon-star-off"></i>&nbsp;&nbsp;<a href="#finish">结尾</a></li>
                </ul>
                <!-- <p><a href="#book">随笔</a></p>
                <p><a href="#think">感悟</a></p>
                <p><a href="#phone">联系方式</a></p> -->
               
            </div>
            <div class="show-right">
                <h1>动态展示页面</h1>
                <div class="times"><i class="el-icon-time">2020年9月24日</i><i class="el-icon-chat-dot-round" style="margin-left: 30px;">0</i></div>
                <div class="firsts"><a name="first">前言</a></div>
                <div class="codes">
                    <h3><a name="code">代码</a></h3>
                    <!-- 代码框 -->
                    <pre><code class="lang-html"><span class="hljs-comment">&lt;!--'animated bounceIn' 为animated.css里的--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"newBlog"</span> <span class="hljs-attr">v-scroll-show</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"headline animated bounceIn"</span>&gt;</span>最近更新<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"posts animated fadeIn"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>文章<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                    </code></pre>

                    <pre><code class="lang-css"><span class="hljs-selector-class">.newBlog</span> {
    <span class="hljs-attribute">min-height</span>: <span class="hljs-number">500px</span>;
}
<span class="hljs-selector-class">.headline</span>, <span class="hljs-selector-class">.posts</span> {
    <span class="hljs-attribute">display</span>: none;
}
                    </code></pre>

                    <pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    directives: {
        scrollShow: {
            bind: <span class="hljs-function"><span class="hljs-params">(el)</span> =&gt;</span> {
                <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'scroll'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
                    <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.body.scrollTop + <span class="hljs-number">400</span> &gt; el.offsetTop) {
                        <span class="hljs-keyword">for</span> (let i = <span class="hljs-number">0</span>; i &lt; el.children.length; i++) {
                            setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {  
                                el.children[i].style.display = <span class="hljs-string">'block'</span>  
                            }, <span class="hljs-number">1000</span> * i)
                        }
                    }
                })
            }
        }
    }
}
                    </code></pre>

                    
                    

                    
                </div>
                <div class="processs">
                    <h3><a name="process">简单介绍实现过程</a></h3>
                    <p>突如其来的新冠肺炎疫情给我国经济社会发展带来前所未有的冲击。党中央提出坚定实施扩大内需战略，维护经济发展和社会稳定大局。在当前条件下坚定实施扩大内需战略，不是不要推进供给侧结构性改革，而是坚持以供给侧结构性改革为主线，
                        把扩大内需作为我国发展的战略基点，实现主线和战略基点相辅相成、相得益彰；不是不要扩大开放，</p>
                </div>
                <div class="finishs">
                    <h3><a name="finish">结尾</a></h3>
                    <p>突如其来的新冠肺炎疫情给我国经济社会发展带来前所未有的冲击。党中央提出坚定实施扩大内需战略，维护经济发展和社会稳定大局。在当前条件下坚定实施扩大内需战略，不是不要推进供给侧结构性改革，而是坚持以供给侧结构性改革为主线，
                        把扩大内需作为我国发展的战略基点，实现主线和战略基点相辅相成、相得益彰；不是不要扩大开放，而是着力推动更高水平对外开放，逐步形成以国内大循环为主体、国内国际双循环相互促进的新发展格局，培育新形势下我国参与国际合作和竞争新优势
                    </p>
                </div>
                <div>
                    <Email></Email>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Email from '@/components/email'

export default {
    name:'show',
    components:{
        Email,
    }

}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: #fff;
    }

    .blog-up{
        background:url('../assets/sunset.jpg');
        height:570px;
        width:100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blog-up-name{
        margin: 0;
        color: #fff;
        font-size: 45px;
        font-family: 'Times New Roman';
    }
    .show-content{
        display: flex;
        background-color: black;
        color: #fff;
    }
    .show-left{
        width: 300px;
        text-align: left;
        margin-left: 32px;
        margin: 40px 20px 20px 10px;
    }
    .show-left h3 span{
        margin-right: 20px;
    }
    .show-left ul{
        color: #fff;
        list-style: none;
    }
    .show-left ul li{
        margin-left: 20px;
        height: 30px;
        width: 190px;
    }
    .show-left ul li:first-child{
        margin-left:10px;
        margin-top: 10px;
    }
    .show-left ul li:last-child{
        margin-left:10px;
        margin-top: 10px;
    }
    .show-right{
        width: 800px;
        text-align: left;
    }
    .show-right h1{
        text-align: center;
        margin-top: 70px;
    }
    .times{
        text-align: right;
    }
    .firsts{
        font-size: 25px;
        font-weight: 600;
        border-bottom: 2px solid #fff;
        padding: 20px 0 10px 0;
    }
    .codes{
        margin: 35px 0px 35px 0;
    }
    .codes p{
        margin-top: 10px;
        color: #e3eaf1;
    }
    .processs{

    }
    .processs h3{
        padding: 15px 0;
    }
    .finishs{

    }
    .finishs h3{
        border-bottom: 2px solid;
        padding: 50px 0 15px 0;
    }
    .finishs p{
        padding-top: 25px;
    }
    pre{
        padding: 0.625rem 0.625rem;
        background: #474949;
        border-radius: 0.3125rem;
        overflow-x: auto;
        font-size: 18px;
        margin-top: 20px;
    }
    code{
        color: #93f0d8;
    }
    .hljs-comment{
        color: #8e908c;
    }
    .hljs-tag{
        color: darkturquoise;
    }
    .hljs-string{
        color: greenyellow;
    }
    .hljs-attribute {
        color: #eab700;
    }
    .hljs-number{
        color: #f5871f;
    }
    .hljs-keyword{
        color: #cf20ff;
    }
</style>